<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>笔记更新</title>
    <link rel="icon" type="shortcut icon" href="/img/favicon.png">
    <link rel="stylesheet" href="/editorMd-master/css/editormd.min.css">
    <!-- 引入依赖 和编辑页面相同-->
    <link rel="stylesheet" href="/layui/css/layui.css"/>
    <link rel="stylesheet" href="/css/noteCommon.css"/>
    <link rel="stylesheet" href="/css/noteEdit.css">
</head>
<!-- 在之外创建textArea存放返回的数据-->
<textarea id="originText" style="display: none">[[${note.noteContent}]]</textarea>
<body>
<!-- 导航栏 -->
<div class="nav">
    <!--   头部导航 navigator     -->
    <img src="/img/CfengNet.png" alt="logo ">
    <span class="logoTitle animated headShake">Xiao Huan CloudNote</span>
    <span class="spacer"></span>
    <a href="/sys/toNote">Cloud主页</a>
    <a href="#">写笔记</a>
    <a href="/sys/toIndex">返回首页</a>
</div>
<!-- 版心 -->
<div class="note-edit-container">
    <!-- 标题编辑区 -->
    <div class="title">
        <input  required type="text"  id="title" th:value="${note.noteTitle}">
        <input type="button" value="发布文章" id="submit">
    </div>
    <div class="discription">
        <textarea required id="noteDescription" th:text="${note.noteDescription}" style="height: auto;width: 100%;"></textarea>
    </div>
    <!-- 内容编辑区 -->
    <div id="editor">
        <textarea name="noteContent" id="noteContent" style="display: none;"></textarea>
    </div>
</div>

<script src="/js/JQuerym.js"></script>
<script src="/editorMd-master/lib/marked.min.js"></script>
<script src="/editorMd-master/lib/prettify.min.js"></script>
<script src="/editorMd-master/editormd.js"></script>
<script>
    // editor.md
    var editor = editormd("editor", {
        // 这里的尺寸必须在这里设置，设置样式会被 editormd 自动覆盖
        width: "100%",
        // 设定编辑高度
        height: 'calc(100% - 50px)',
        // 编辑页的初始内容，这里就是原内容
        markdown: $("#originText").val(),
        //指定 editor.md 依赖的插件路径    所以必须包含lib
        path: "/editorMd-master/lib/",
        //有内置的Textarea
        saveHTMLToTextarea: true,
        //使用科学公式，流程图，TOCM
        tocm: true,
        tex: true,
        flowChart: true,
        //上传图片的配置
        imageUpload: true,
        imageFormats: ["jpg","jpeg","gif","png","bmp","webp"],
        imageUploadURL: "/", //上传文件到Minio服务
    });

    //提交笔记
    $("#submit").click(function() {
        var Content =  editor.getMarkdown();
        var Description = $("#noteDescription").val();
        var Title = $("#title").val();
        if(!Title || !Description || !Content) {
            alert("文章不能为空");
            return; //不上传
        }
        var putData = {
            "id": "[[${note.id}]]",
            "noteContent": Content,
            "noteDescription": Description,
            "noteTitle": Title,
        }

        $.ajax({
            url : "/note/",
            type : "PUT",
            data : putData,
            success : function(result) {
                alert(result.data);
                location.href = "/note/" + "[[${note.id}]]";
            }
        });
    })


</script>
</body>
</html>
